<template>
  <div class="card-info">
    <a-card :bordered="false">
      <a-skeleton :loading="loading">
        <div class="card-info-head" v-if="title" :class="isCenterTitle ? 'card-info-center' : ''">
          <div class="card-info-head-title">
            {{ title }}
            <div class="card-info-head-subtitle" v-if="subtitle">
              {{ subtitle }}
            </div>
          </div>
          <div class="card-table-head-remark"><slot name="opt"></slot></div>
        </div>
        <template v-if="isEmpty">
          <div class="no-data">
            <img class="no-data-img" src="/@/assets/images/nodata.png" />
            <p>暂无数据</p>
          </div>
        </template>
        <template v-else>
          <slot></slot>
        </template>
      </a-skeleton>
    </a-card>
  </div>
</template>
<script>
  import { defineComponent, computed } from 'vue';
  import { Card, Skeleton } from 'ant-design-vue';

  export default defineComponent({
    name: 'FlexCard',
    components: {
      ACard: Card,
      ASkeleton: Skeleton,
    },
    props: {
      title: String,
      subtitle: String,
      dataList: Array,
      loading: Boolean,
      isCenterTitle: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, { slots }) {
      const isEmpty = computed(() => {
        const defaultSlot = slots.default && slots.default();
        if (!defaultSlot) return true;

        if (props.dataList !== undefined && (!props.dataList || props.dataList.length === 0)) {
          return true;
        }

        return false;
      });

      return {
        isEmpty,
      };
    },
  });
</script>
<style lang="less" scoped>
  .card-info {
    background: #ffffff;
    box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
    border-radius: 8px;
    height: 100%;
    flex-grow: 1; /* 填充剩余空间 */

    &-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;

      &-title {
        display: flex;
        font-size: 16px;
        font-weight: 600;
        align-items: flex-end;
        color: #000;
      }
      &-subtitle {
        font-size: 12px;
        font-weight: 400;
      }
    }
    &-center {
      justify-content: center;
    }
  }

  .no-data {
    text-align: center;
    padding: 20px 0;

    &-img {
      width: 120px;
      height: 120px;
    }

    p {
      margin-top: 8px;
      color: #999;
    }
  }

  :deep(.ant-card-body) {
    padding: 16px;
  }
  :deep(.ant-card) {
    box-shadow: none !important;
    background: transparent !important;
  }
</style>
